<template>
<h1>El-布局容器</h1>
<!--
  布局容器主要是有两个标签 el-row(行) el-col(列) 每行一共分为24个列
 -->
  <el-row :gutter="20">
    <el-col :span="6">哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈</el-col>
  </el-row>
  <h3>两张图</h3>
  <<el-row :gutter="10">
   <el-col :span="12"><img src="/rich.jpg" style="width: 100%;"></el-col>
   <el-col :span="12"><img src="/rich.jpg" style="width: 100%;"></el-col>
  </el-row>
  <h3>六张图</h3>
  <el-row :gutter="10">
   <el-col :span="4"><img src="/2024.png" style="width: 100%;"></el-col>
   <el-col :span="4"><img src="/2024.png" style="width: 100%;"></el-col>
   <el-col :span="4"><img src="/2024.png" style="width: 100%;"></el-col>
   <el-col :span="4"><img src="/2024.png" style="width: 100%;"></el-col>
   <el-col :span="4"><img src="/2024.png" style="width: 100%;"></el-col>
   <el-col :span="4"><img src="/2024.png" style="width: 100%;"></el-col>
  </el-row>
  <h3>列偏移</h3>
  <el-row :gutter="10">
<!--    :offset表示的是向右边偏移几列 -->
    <el-col :offset="9" :span="12"><img src="/2024.png" style="width: 100%;"></el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :offset="6" :span="12"><img src="/2024.png" style="width: 100%;"></el-col>
  </el-row>
<!--  现在有三张图片2024.png 他们的宽度比是1:2:3 -->
  <el-row :gutter="10">
    <el-col :span="4"><img src="/2024.png" style="width: 100%;" /> </el-col>
    <el-col :span="8"><img src="/2024.png" style="width: 100%;" /> </el-col>
    <el-col :span="12"><img src="/2024.png" style="width: 100%;" /> </el-col>
  </el-row>
<!--  2.现在有8列,均分一行,每列显示的内容为1 2 3 4 5 6 7 8 -->
  <el-row :gutter="10">
    <el-col :span="3" v-for="item in 8" style="border: 3px solid red">{{item}}</el-col>
  </el-row>
  <br>
  <br>
  <hr>
<!--  布局嵌套-->
  <el-row :gutter="10">
   <el-col :span="12" style="border: 3px solid red">12</el-col>
   <el-col :span="12" style="border: 3px solid green">
     <el-row :gutter="10">
       <el-col :span="8" style="border: 3px solid blue">8</el-col>
       <el-col :span="8" style="border: 3px solid blue">8</el-col>
       <el-col :span="8" style="border: 3px solid blue">8</el-col>
     </el-row>
   </el-col>
  </el-row>
</template>


<script setup>

</script>

<style scoped>

</style>